<script setup lang="ts" name="emergency-index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import Bus from "@/utils/eventBus";

import { useRouter } from "vue-router";
import {
  getEmergencyTask,
  getUserList,
  exportEmergencyTask,
} from "@/api/server_emergency";
const router = useRouter();
const List = ref<any>([]);
const total = ref(0);
const height = ref(0);
const listParams = ref<any>({
  page: 1,
  pageSize: 20,
  startTime: '',
  endTime: '',
});
const currentPage = ref(1);
const userList = ref<any>([]);
const getUserList_ = async () => {
  let res = await getUserList({
    page: 1,
    pageSize: 10000,
  });
  userList.value = res.list;
};
const getList = async (page: number) => {
  let res = await getEmergencyTask({
    ...listParams.value,
    page,
  });
  if (res.result == "success") {
    List.value = res.list;
    total.value = Number(res.total);
  }
};
const handleSizeChange = (val: number) => {
  listParams.value.pageSize = val;
  getList(listParams.value.page);
};
const handleCurrentChange = (val: number) => {
  getList(val);
};
const exportLog = async () => {
  let res = await exportEmergencyTask({
    ...listParams.value,
  });
  if (res.result === "success") {
    const link = document.createElement("a");
    link.href = import.meta.env.VITE_RES_URL + res.url;
    link.setAttribute("download", res.url.split("/").pop());
    document.body.appendChild(link);
    link.click();
  }
};
const detail = (data: any) => {
  Bus.$emit("openEmergencyDetail", {
    taskId: data.emergency_task_id
  });
  console.log('----data-----', data.emergency_task_id);

};
const openTableItem = (type: any, data: any) => {
  if (type == "image") {
    Bus.$emit("openImage", {
      link: data.image_url,
    });
  } else {
    Bus.$emit("openVideo", {
      video_url: data.video_url,
    });
  }
};
onMounted(() => {
  let pageTable: any = document.querySelector(".page-table");
  height.value = pageTable.clientHeight;
  getUserList_();
  getList(1);
  /* 测试 */
  //   setTimeout(() => {
  //     List.value = [{"emergency_task_id":"1","emergency_case_id":"1","name":"医疗","detection_log_id":"1655301974","status":"NG","gmt_create":"2022-07-17 08:47:22","gmt_modified":"2022-07-17 08:47:22","action":"医疗","addr":"testCam","image_url":"testImageUrl","video_url":"testVideoUrl","target_user_id":null,"result":null,"score":null,"camera_ip":"111.224.125.49:554","is_read":"0","is_new":"1","gmt_detection":"2022-07-17 08:47:22","caseInfo":{"emergency_case_id":"1","name":"医疗组1","first_leader":"1","second_leader":"2","status":"normal","gmt_create":"2022-07-15 14:21:51","gmt_modified":"2022-07-15 14:21:51","firstLeaderInfo":{"user_id":"1","dept_id":"3","name":"test","password":"123456","phone":"15806026996","gmt_create":"2022-04-09 18:46:47","gmt_modified":"2022-04-14 20:00:06"},"secondLeaderInfo":{"user_id":"2","dept_id":"1","name":"testCam","password":"127.0.0.1","phone":"12315151212","gmt_create":"2022-04-13 20:32:14","gmt_modified":"2022-04-13 20:32:14"}},"cameraUserName":"testCam"}];
  //     Bus.$emit("openEmergencyDetail", {
  //         taskId:'1'
  //     });
  //   },1000)
});
</script>

<template>
  <div class="emergency-index-page">
    <div class="page-top">
      <el-form :inline="true" :model="listParams" size="small" class="warning-form-inline">
        <el-form-item label="开始时间">
          <el-date-picker v-model="listParams.startTime" type="datetime" format="YYYY/MM/DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss" style="width: 160px" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" style="width: 160px"
            v-model="listParams.endTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input style="width: 160px" v-model="listParams.addr" placeholder="选输入">
          </el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-select style="width: 100px" filterable clearable v-model="listParams.cameraUserId" placeholder="请选择">
            <el-option :label="u.name" :value="u.user_id" v-for="(u, index) in userList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList(1)">搜索</el-button>
          <el-button type="primary" @click="exportLog">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-table">
      <el-table ref="table" v-if="height" :data="List" :height="height">
        <el-table-column label="序号" prop="emergency_task_id"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            <span v-if="scope.row.status == 'wait'">等待</span>
            <span v-if="scope.row.status == 'processing'">进行中</span>
            <span v-if="scope.row.status == 'finish'">完成</span>
            <span v-if="scope.row.status == 'cancel'">取消</span>
          </template>
        </el-table-column>
        <el-table-column label="行为" prop="action"></el-table-column>
        <el-table-column label="创建时间" prop="gmt_create"></el-table-column>
        <el-table-column label="地点" prop="addr"></el-table-column>
        <el-table-column label="图片" prop="image_url" show-overflow-tooltip>
          <template #default="scope">
            <span style="color: #3d7087; cursor: pointer" @click="openTableItem('image', scope.row)">{{
                scope.row.image_url
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="视频" prop="video_url" show-overflow-tooltip>
          <template #default="scope">
            <span style="color: #3d7087; cursor: pointer" @click="openTableItem('video', scope.row)">{{
                scope.row.video_url
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="责任人" prop="cameraUserName"></el-table-column>
        <el-table-column label="等级" prop="cameraUserName">
          <template #default="{ row }"> - </template>
        </el-table-column>
        <el-table-column label="组长" prop="caseInfo.firstLeaderInfo.name"></el-table-column>
        <el-table-column label="副组长" prop="caseInfo.secondLeaderInfo.name"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button link size="small" @click="detail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        v-model:currentPage="currentPage" :page-sizes="[20, 50, 80, 100]" :page-size="listParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<style lang="scss">
.emergency-index-page {
  width: 100%;
  height: 100%;

  .page-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-form-item {
      margin-bottom: 5px;
      margin-right: 5px;
    }
  }

  .page-table {
    margin: 16px 0;
    height: calc(100% - 100px);
  }
}
</style>
